<template>
   <a-modal
      title="删除分组"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
        <template v-if="isHaveWorksheet">
            <p>当前分组下包含工作表，必须将它们移动到其他分组后再进行删除</p>
            <a-form-model :model="formData" :rules="rules" ref="deleteGroupForm">
                <a-form-model-item label="移动到" prop="newGroupId">
                    <a-select v-model="formData.newGroupId" placeholder="请选择">
                        <a-select-option v-for="item in worksheetGroupIds"
                            :key="item.id" :value="item.id">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-form-model>
        </template>
    </a-modal>
</template>

<script>
import {
    getAppDetail,
    getWorksheetGroupDetail
} from "@/api/app"
export default {
    props:{
        visible:Boolean
    },
    data(){
        return {
            formData: {
                newGroupId: undefined
            },
            worksheetGroupIds: [],
            isHaveWorksheet: false,
            rules: {
                newGroupId: [
                    { required: true, message: '请选择分组', trigger: 'change' }
                ]
            },
        }
    },
    methods:{
        handleOk(){
            if(this.isHaveWorksheet){
                this.$refs.deleteGroupForm.validate(valid => {
                    if (valid) {
                        this.$emit('ok', this.formData)
                    } else {
                        return false;
                    }
                });
            } else {
                this.$emit('ok', this.formData)
            }
        },
        handleCancel(){
            this.$emit('cancel')
        },
    },
    async created(){
        let appDetail = await getAppDetail(this.appId)
        let data = await getWorksheetGroupDetail(this.groupId)
        this.worksheetGroupIds = appDetail.worksheetGroupList.filter(l => l.id !== this.groupId)
        this.isHaveWorksheet = data.worksheetInfoList.length > 0
    },
    computed: {
        appId() {
            return this.$route.params.appId;
        },
        groupId() {
            return this.$route.params.groupId;
        }
    }
}
</script>

<style>

</style>